<template>
  <q-page class="dashboard-container">
    <!-- 顶部统计卡片 -->
 
    <div class="row q-col-gutter-lg q-mb-lg">
      <div class="col-12 col-sm-6 col-md-6">
        <q-card class="stat-card">
          <q-card-section>
            <div class="row items-center justify-between">
              <div class="stat-content">
                <div class="stat-label">年度展会总数</div>
                <div class="stat-value">{{ stats.exhibitionCount }}</div>
                <div class="stat-growth" :class="stats.exhibitionCountGrowth >= 0 ? 'text-positive' : 'text-negative'">
                  {{ stats.exhibitionCountGrowth >= 0 ? '↑' : '↓' }} {{ Math.abs(stats.exhibitionCountGrowth) }}%
                </div>
              </div>
              <div class="stat-icon">
                <q-icon name="event" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-12 col-sm-6 col-md-6">
        <q-card class="stat-card">
          <q-card-section>
            <div class="row items-center justify-between">
              <div class="stat-content">
                <div class="stat-label">总展览面积</div>
                <div class="stat-value">{{ stats.totalArea }}万㎡</div>
                <div class="stat-growth" :class="stats.areaGrowth >= 0 ? 'text-positive' : 'text-negative'">
                  {{ stats.areaGrowth >= 0 ? '↑' : '↓' }} {{ Math.abs(stats.areaGrowth) }}%
                </div>
              </div>
              <div class="stat-icon">
                <q-icon name="aspect_ratio" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-12 col-sm-6 col-md-6">
        <q-card class="stat-card">
          <q-card-section>
            <div class="row items-center justify-between">
              <div class="stat-content">
                <div class="stat-label">参展商数量</div>
                <div class="stat-value">{{ stats.exhibitorCount }}</div>
                <div class="stat-growth" :class="stats.exhibitorGrowth >= 0 ? 'text-positive' : 'text-negative'">
                  {{ stats.exhibitorGrowth >= 0 ? '↑' : '↓' }} {{ Math.abs(stats.exhibitorGrowth) }}%
                </div>
              </div>
              <div class="stat-icon">
                <q-icon name="store" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-12 col-sm-6 col-md-6">
        <q-card class="stat-card">
          <q-card-section>
            <div class="row items-center justify-between">
              <div class="stat-content">
                <div class="stat-label">观众人数</div>
                <div class="stat-value">{{ stats.visitorCount }}M</div>
                <div class="stat-growth" :class="stats.visitorGrowth >= 0 ? 'text-positive' : 'text-negative'">
                  {{ stats.visitorGrowth >= 0 ? '↑' : '↓' }} {{ Math.abs(stats.visitorGrowth) }}%
                </div>
              </div>
              <div class="stat-icon">
                <q-icon name="groups" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>

    <div class="row q-col-gutter-sm q-mb-md">
      <div class="col-12 col-md-6">
        <q-card class="mini-stat-card">
          <q-card-section class="q-pa-sm">
            <div class="row items-center">
              <div class="col">
                <div class="text-subtitle2 text-grey-7">年度展会总数</div>
                <div class="text-h6 text-primary">{{ statistics.totalExhibitions }}</div>
              </div>
              <div class="col-auto">
                <q-icon name="event" size="24px" color="primary" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
      
      <div class="col-12 col-md-6">
        <q-card class="mini-stat-card">
          <q-card-section class="q-pa-sm">
            <div class="row items-center">
              <div class="col">
                <div class="text-subtitle2 text-grey-7">总展览面积</div>
                <div class="text-h6 text-positive">{{ statistics.ufiCertified }}</div>
              </div>
              <div class="col-auto">
                <q-icon name="aspect_ratio" size="24px" color="positive" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
      
      <div class="col-12 col-md-6">
        <q-card class="mini-stat-card">
          <q-card-section class="q-pa-sm">
            <div class="row items-center">
              <div class="col">
                <div class="text-subtitle2 text-grey-7">参展商数量</div>
                <div class="text-h6 text-warning">{{ statistics.avgArea }}㎡</div>
              </div>
              <div class="col-auto"> 
                <q-icon name="store" size="24px" color="warning" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
      
      <div class="col-12 col-md-6">
        <q-card class="mini-stat-card">
          <q-card-section class="q-pa-sm">
            <div class="row items-center">
              <div class="col">
                <div class="text-subtitle2 text-grey-7">观众人数</div>
                <div class="text-h6 text-info">{{ statistics.monthlyExhibitions }}</div>
              </div>
              <div class="col-auto"> 
                <q-icon name="groups" size="24px" color="info" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="row q-col-gutter-lg">
      <!-- 趋势图 -->
      <div class="col-12">
        <q-card class="chart-card">
          <q-card-section>
            <div class="row items-center justify-between q-mb-md">
              <div class="chart-title">展会发展趋势</div>
              <div class="row q-gutter-sm">
                <q-select
                  v-model="selectedYear"
                  :options="yearOptions"
                  label="年份"
                  dense
                  outlined
                  class="year-select"
                  @update:model-value="updateCharts"
                />
                <q-btn-group outline>
                  <q-btn
                    :color="timeRange === 'year' ? 'primary' : 'grey'"
                    label="年"
                    @click="timeRange = 'year'"
                  />
                  <q-btn
                    :color="timeRange === 'quarter' ? 'primary' : 'grey'"
                    label="季"
                    @click="timeRange = 'quarter'"
                  />
                  <q-btn
                    :color="timeRange === 'month' ? 'primary' : 'grey'"
                    label="月"
                    @click="timeRange = 'month'"
                  />
                </q-btn-group>
              </div>
            </div>
            <div ref="trendChart" class="trend-chart"></div>
          </q-card-section>
        </q-card>
      </div>

      <!-- 地理分布 -->
      <div class="col-12 col-lg-12">
        <q-card class="chart-card">
          <q-card-section>
            <div class="row items-center justify-between q-mb-md">
              <div class="chart-title">展会地理分布</div>
              <q-select
                v-model="selectedRegion"
                :options="regionOptions"
                label="区域"
                dense
                outlined
                class="region-select"
                @update:model-value="updateMapChart"
              />
            </div>
            <div ref="mapChart" class="map-chart"></div>
          </q-card-section>
        </q-card>
      </div>

      <!-- 品类分布 -->
      <div class="col-12 col-lg-12">
        <q-card class="chart-card">
          <q-card-section>
            <div class="row items-center justify-between q-mb-md">
              <div class="chart-title">展会品类分布</div>
              <q-btn-group outline>
                <q-btn
                  :color="categoryLevel === 'primary' ? 'primary' : 'grey'"
                  label="一级"
                  @click="categoryLevel = 'primary'"
                />
                <q-btn
                  :color="categoryLevel === 'secondary' ? 'primary' : 'grey'"
                  label="二级"
                  @click="categoryLevel = 'secondary'"
                />
              </q-btn-group>
            </div>
            <div ref="pieChart" class="pie-chart"></div>
          </q-card-section>
        </q-card>
      </div>

      <!-- 热点行业 -->
      <div class="col-12  col-lg-12">
        <q-card class="chart-card">
          <q-card-section>
            <div class="chart-title q-mb-md">热点行业分布</div>
            <div ref="bubbleChart" class="bubble-chart"></div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref, reactive,onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
const statistics = reactive({
  totalExhibitions: 0,
  ufiCertified: 0,
  avgArea: 0,
  monthlyExhibitions: 0
})

// State
const selectedYear = ref('2023')
const timeRange = ref('year')
const selectedRegion = ref('全国')
const categoryLevel = ref('primary')

// Options
const yearOptions = ['2023', '2022', '2021', '2020', '2019']
const regionOptions = ['全国', '华东', '华南', '华北', '西南', '东北', '西北', '华中']

// Stats data
const stats = ref({
  exhibitionCount: '0',
  exhibitionCountGrowth: 0,
  totalArea: '0',
  areaGrowth: 0,
  exhibitorCount: '0',
  exhibitorGrowth:0,
  visitorCount: 0,
  visitorGrowth: 0
})

// Mock data
const trendData = {
  years: ['2019', '2020', '2021', '2022', '2023'],
  exhibitionCount: [4800, 3200, 5497, 5800, 6200],
  areaGrowth: [5.2, -30, 25, 8.3, 12.5],
  exhibitorCount: [75000, 45000, 85000, 92000, 100000]
}

const bubbleData = [
  { name: '新能源', value: 95, size: 150 },
  { name: '跨境电商', value: 85, size: 120 },
  { name: '智能制造', value: 75, size: 100 },
  { name: '医疗健康', value: 65, size: 80 },
  { name: '消费电子', value: 55, size: 60 },
  { name: '数字经济', value: 45, size: 50 },
  { name: '绿色环保', value: 35, size: 40 },
  { name: '文化创意', value: 25, size: 30 }
]

const mapData = [
  { name: '北京', value: 385 },
  { name: '上海', value: 425 },
  { name: '广州', value: 365 },
  { name: '深圳', value: 345 },
  { name: '成都', value: 285 },
  { name: '杭州', value: 265 },
  { name: '武汉', value: 245 },
  { name: '西安', value: 225 },
  { name: '重庆', value: 205 },
  { name: '南京', value: 185 },
  { name: '天津', value: 165 },
  { name: '长沙', value: 145 },
  { name: '青岛', value: 125 },
  { name: '大连', value: 105 },
  { name: '厦门', value: 85 }
]

const categoryData = {
  primary: [
    { name: '消费品', value: 35 },
    { name: '工业品', value: 25 },
    { name: '服务贸易', value: 20 },
    { name: '科技创新', value: 15 },
    { name: '其他', value: 5 }
  ],
  secondary: [
    { name: '家居用品', value: 15 },
    { name: '3C电子', value: 12 },
    { name: '服装服饰', value: 8 },
    { name: '机械设备', value: 10 },
    { name: '医疗器械', value: 8 },
    { name: '金融服务', value: 7 },
    { name: '物流运输', value: 5 },
    { name: '其他服务', value: 8 }
  ]
}

const wordCloudData = [
  { name: '碳中和', value: 100 },
  { name: 'AI+消费', value: 90 },
  { name: '数字化转型', value: 85 },
  { name: '智能制造', value: 80 },
  { name: '跨境电商', value: 75 },
  { name: '新能源', value: 70 },
  { name: '医疗健康', value: 65 },
  { name: '消费升级', value: 60 },
  { name: '数字经济', value: 55 },
  { name: '绿色环保', value: 50 },
  { name: '文化创意', value: 45 },
  { name: '智慧城市', value: 40 },
  { name: '物联网', value: 35 },
  { name: '区块链', value: 30 },
  { name: '元宇宙', value: 25 }
]

// Chart refs
const trendChart = ref(null)
const bubbleChart = ref(null)
const mapChart = ref(null)
const pieChart = ref(null)
const wordCloudChart = ref(null)

// Chart instances
let trendChartInstance = null
let bubbleChartInstance = null
let mapChartInstance = null
let pieChartInstance = null
let wordCloudChartInstance = null

// Methods
const initCharts = () => {
  // Initialize trend chart
  if (trendChart.value && !trendChartInstance) {
    trendChartInstance = echarts.init(trendChart.value)
  }
  
  // Initialize bubble chart
  if (bubbleChart.value && !bubbleChartInstance) {
    bubbleChartInstance = echarts.init(bubbleChart.value)
  }
  
  // Initialize map chart
  if (mapChart.value && !mapChartInstance) {
    mapChartInstance = echarts.init(mapChart.value)
  }
  
  // Initialize pie chart
  if (pieChart.value && !pieChartInstance) {
    pieChartInstance = echarts.init(pieChart.value)
  }
  
  // Initialize word cloud chart
  if (wordCloudChart.value && !wordCloudChartInstance) {
    wordCloudChartInstance = echarts.init(wordCloudChart.value)
  }
}

const updateCharts = () => {
  // Update all charts based on selected year
  updateTrendChart()
  updateBubbleChart()
  updateMapChart()
  updatePieChart()
  updateWordCloudChart()
}

const updateTrendChart = () => {
  if (trendChartInstance) {
    trendChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
        formatter: function(params) {
          let result = params[0].axisValue + '<br/>'
          params.forEach(param => {
            result += `${param.seriesName}: ${param.value}<br/>`
          })
          return result
        },
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#E5E7EB',
        textStyle: {
          color: '#1A1F36'
        }
      },
      legend: {
        data: ['展会数量', '面积增长率', '参展商数量'],
        textStyle: {
          color: '#1A1F36',
          fontSize: 12
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: trendData.years,
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: '#E5E7EB'
          }
        },
        axisLabel: {
          color: '#64748B'
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '展会数量',
          position: 'left',
          axisLine: {
            lineStyle: {
              color: '#E5E7EB'
            }
          },
          axisLabel: {
            color: '#64748B'
          },
          splitLine: {
            lineStyle: {
              color: '#F1F5F9'
            }
          }
        },
        {
          type: 'value',
          name: '增长率(%)',
          position: 'right',
          axisLine: {
            lineStyle: {
              color: '#E5E7EB'
            }
          },
          axisLabel: {
            color: '#64748B'
          },
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '展会数量',
          type: 'line',
          data: trendData.exhibitionCount,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#1976D2'
          },
          lineStyle: {
            width: 3
          }
        },
        {
          name: '面积增长率',
          type: 'line',
          yAxisIndex: 1,
          data: trendData.areaGrowth,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#10B981'
          },
          lineStyle: {
            width: 3
          }
        },
        {
          name: '参展商数量',
          type: 'line',
          data: trendData.exhibitorCount,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#F59E0B'
          },
          lineStyle: {
            width: 3
          }
        }
      ]
    })
  }
}

const updateMapChart = () => {
  if (mapChartInstance) {
    mapChartInstance.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 场展会',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#E5E7EB',
        textStyle: {
          color: '#1A1F36'
        }
      },
      visualMap: {
        min: 0,
        max: 500,
        left: 'left',
        bottom: 'bottom',
        text: ['高', '低'],
        calculable: true,
        inRange: {
          color: ['#EFF6FF', '#1976D2']
        },
        textStyle: {
          color: '#64748B'
        }
      },
      series: [
        {
          name: '展会数量',
          type: 'map',
          map: 'china',
          roam: true,
          data: mapData,
          itemStyle: {
            areaColor: '#EFF6FF',
            borderColor: '#E5E7EB',
            borderWidth: 1
          },
          emphasis: {
            label: {
              show: true,
              color: '#fff'
            },
            itemStyle: {
              areaColor: '#1976D2',
              borderColor: '#fff',
              borderWidth: 1,
              shadowBlur: 10,
              shadowColor: 'rgba(25, 118, 210, 0.5)'
            }
          }
        }
      ]
    })
  }
}

const updatePieChart = () => {
  if (pieChartInstance) {
    const data = categoryData[categoryLevel.value]
    pieChartInstance.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}%',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#E5E7EB',
        textStyle: {
          color: '#1A1F36'
        }
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        top: 'middle',
        textStyle: {
          color: '#1A1F36',
          fontSize: 12
        }
      },
      series: [
        {
          name: '展会品类',
          type: 'pie',
          radius: ['45%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 6,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center',
            fontSize: 14,
            color: '#1A1F36'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.2)'
            }
          },
          labelLine: {
            show: false
          },
          data: data,
          color: ['#1976D2', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6']
        }
      ]
    })
  }
}

const updateBubbleChart = () => {
  if (bubbleChartInstance) {
    bubbleChartInstance.setOption({
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          return `${params.name}<br/>热度: ${params.value[1]}<br/>规模: ${params.symbolSize}`
        },
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#E5E7EB',
        textStyle: {
          color: '#1A1F36'
        }
      },
      xAxis: {
        type: 'category',
        data: bubbleData.map(item => item.name),
        axisLabel: {
          interval: 0,
          rotate: 30,
          color: '#64748B'
        },
        axisLine: {
          lineStyle: {
            color: '#E5E7EB'
          }
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        name: '热度值',
        nameTextStyle: {
          color: '#64748B'
        },
        axisLabel: {
          color: '#64748B'
        },
        axisLine: {
          lineStyle: {
            color: '#E5E7EB'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#F1F5F9'
          }
        }
      },
      series: [
        {
          type: 'scatter',
          data: bubbleData.map(item => ({
            value: [item.name, item.value],
            symbolSize: item.size,
            itemStyle: {
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 0,
                  color: 'rgba(25, 118, 210, 0.5)'
                },
                {
                  offset: 1,
                  color: 'rgba(25, 118, 210, 0.8)'
                }
              ])
            }
          }))
        }
      ]
    })
  }
}

const updateWordCloudChart = () => {
  if (wordCloudChartInstance) {
    wordCloudChartInstance.setOption({
      tooltip: {
        show: true,
        formatter: function(params) {
          return `${params.name}: ${params.value}`
        },
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#E5E7EB',
        textStyle: {
          color: '#1A1F36'
        }
      },
      series: [
        {
          type: 'wordCloud',
          shape: 'circle',
          left: 'center',
          top: 'center',
          width: '80%',
          height: '80%',
          right: null,
          bottom: null,
          sizeRange: [14, 60],
          rotationRange: [-45, 45],
          rotationStep: 15,
          gridSize: 8,
          drawOutOfBound: false,
          textStyle: {
            fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
            fontWeight: 'normal',
            color: function () {
              return ['#1976D2', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'][Math.floor(Math.random() * 5)]
            }
          },
          emphasis: {
            focus: 'self',
            textStyle: {
              fontWeight: 'bold',
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.3)'
            }
          },
          data: wordCloudData
        }
      ]
    })
  }
}


onMounted(async () => {
  try {
    // Load China map data
    const response = await fetch('/100000_full.json')
    const chinaMap = await response.json()
    echarts.registerMap('china', chinaMap)

    // Initialize charts
    initCharts()
    
    // Update all charts
    updateCharts()

    // Handle window resize
    window.addEventListener('resize', () => {
      if (trendChartInstance) trendChartInstance.resize()
      if (bubbleChartInstance) bubbleChartInstance.resize()
      if (mapChartInstance) mapChartInstance.resize()
      if (pieChartInstance) pieChartInstance.resize()
      if (wordCloudChartInstance) wordCloudChartInstance.resize()
    })
  } catch (error) {
    console.error('Failed to load map data:', error)
  }
})
</script>

<style scoped>
.dashboard-container {
  background-color: #f8fafc;
  min-height: 100vh;
  padding: 32px;
}

/* 统一卡片样式 */
.stat-card, .chart-card {
  background: #ffffff;
  border-radius: 16px;
  border: none;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover, .chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* 统一标题样式 */
.text-h4 {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.5px;
}

/* 数据卡片样式 */
.stat-card {
  height: 100%;
}

.stat-card .q-card-section {
  padding: 24px;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.2;
  margin-bottom: 4px;
}

.stat-growth {
  font-size: 14px;
  font-weight: 500;
}

.stat-icon {
  background: rgba(25, 118, 210, 0.1);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon .q-icon {
  font-size: 32px;
  color: #1976D2;
}

/* 图表卡片样式 */
.chart-card {
  height: 100%;
}

.chart-card .q-card-section {
  padding: 24px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.chart-controls {
  background: #f1f5f9;
  border-radius: 8px;
  overflow: hidden;
}

.chart-controls .q-btn {
  padding: 8px 16px;
  min-height: 36px;
  font-size: 14px;
}

/* 图表容器样式 */
.trend-chart {
  height: 400px !important;
  margin-top: 16px;
}

.bubble-chart {
  height: 400px !important;
  margin-top: 16px;
}

.map-chart {
  height: 440px !important;
  margin-top: 16px;
}

.pie-chart {
  height: 440px !important;
  margin-top: 16px;
}

/* 控件样式 */
.export-btn {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 8px 16px;
}

.region-select {
  width: 140px;
}

:deep(.q-field) {
  font-size: 14px;
}

/* 响应式布局 */
@media (max-width: 1400px) {
  .dashboard-container {
    padding: 24px;
  }
  
  .stat-value {
    font-size: 24px;
  }
  
  .trend-chart,
  .bubble-chart {
    height: 360px !important;
  }
  
  .map-chart,
  .pie-chart {
    height: 400px !important;
  }
}

@media (max-width: 1200px) {
  .dashboard-container {
    padding: 20px;
  }
  
  .stat-value {
    font-size: 22px;
  }
  
  .chart-title {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .dashboard-container {
    padding: 16px;
  }
  
  .stat-card .q-card-section {
    padding: 16px;
  }
  
  .chart-card .q-card-section {
    padding: 16px;
  }
  
  .stat-value {
    font-size: 20px;
  }
  
  .stat-label {
    font-size: 14px;
  }
  
  .trend-chart,
  .bubble-chart,
  .map-chart,
  .pie-chart {
    height: 300px !important;
  }
  
  .chart-controls {
    width: 100%;
    margin-top: 12px;
  }
  
  .chart-controls .q-btn {
    flex: 1;
  }
  
  .region-select {
    width: 100%;
    margin-top: 12px;
  }
}
</style>
